import React, { Component } from "react";
import { Form, Icon, Input, Button, Modal } from "antd";
import Axios from "axios";
import "./index.css";
import { NavLink } from "react-router-dom";
class index extends Component {
  // 失败弹框
  error = (item, data) => {
    Modal.error({
      title: item,
      content: data
    });
  };
  // 成功弹框
  success = data => {
    Modal.success({
      content: data
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // 写登录判断
        const Axioss = Axios.create({
          baseURL: "http://chenxu.online:3003"
        });

        // 登录的api请求
        const setApi = () => {
          return Axioss.post("/login", values);
        };
        // 处理返回的函数
        setApi().then(err => {
          if (err.data.code === 1) {
            // 弹出登录成功
            this.success("登录成功");
            // 登录成功跳转到主页
            window.sessionStorage.setItem("user", values.username);
            this.props.history.replace("/");
          } else {
            // 弹出错误
            if (err.data.code === 0) {
              this.error(err.data.msg);
              this.props.form.setFieldsValue({
                password: window.sessionStorage.getItem(" ") || ""
              });
            } else {
              this.error(err.data.msg);
              this.props.history.replace("/register");
            }
          }
        });
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator("username", {
            rules: [{ required: true, message: "请输入用户名!" }]
          })(
            <Input
              prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="用户名"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("password", {
            rules: [{ required: true, message: "请输入密码!" }]
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="密码"
            />
          )}
        </Form.Item>
        <Form.Item className="reg-wrap">
          <NavLink className="active" to="/pass">
            忘记密码
          </NavLink>
          <NavLink className="active" to="/register">
            用户注册
          </NavLink>
        </Form.Item>
        <Form.Item>
          <Button
            block
            type="primary"
            htmlType="submit"
            className="login-form-button"
            shape="round"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
const Wrapped = Form.create({ name: "normal_login" })(index);
export default Wrapped;
